import React, { CSSProperties } from 'react';
import classNames from 'classnames';

interface LinkProps {
    // 文字颜色、a标签背景色
    mainColor?: string
    // 是否不可点击
    disabled?: boolean
    // 是否存在下划线
    openUnderline?: boolean
    children: React.ReactNode,
    className?: string,
    // 跳转成功事件回调
    clickAfterCallback?: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => void
    style?: CSSProperties
}

type LinkPropsType = LinkProps & React.AnchorHTMLAttributes<HTMLElement>

const Link: React.FC<LinkPropsType> = (props) => {

    const { openUnderline, href, target, mainColor, disabled, children, className, clickAfterCallback, style } = props;

    const classes = classNames('yulang-link-container', className, {
        'yulang-link-open-underline': openUnderline
    })

    const styles = () => {
        return { ...{ '--main-color--': mainColor, '--cursor--': disabled ? 'not-allowed' : 'pointer' }, ...style } as React.CSSProperties
    }

    const handleClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
        if (disabled) {
            // 阻止a标签默认跳转
            e.preventDefault();
        } else {
            if (href === '') {
                e.preventDefault();
            } else {
                clickAfterCallback && clickAfterCallback(e);
            }
        }
    }

    return <a className={classes} href={href} target={target} style={styles()} onClick={(e) => handleClick(e)}>
        {children}
    </a>
}

Link.defaultProps = {
    mainColor: '#54138c',
    target: '_self',
    disabled: false,
    openUnderline: true
}
export default Link;